<template>
	<view class="order">
		<mx-navbar :title="'交易记录'" :background="'#fff'" text_color="#000"></mx-navbar>

		<view class="nav-tab">
			<view class="tab-box">
				<view class="tab-item" :class="{ 'act-item': current == index }" v-for="(item, index) in tabsTag" :key="index" @click="tabsChange(index)">
					{{ item.name }}
					<view class="tab-line" v-if="current == index" />
				</view>
			</view>
		</view>

		<view class="c-com">
			<view class="tab-content">
				<view class="points-order-item" v-for="(item, i) in list" :key="i">
					<view class="flag" :class="item.type == 2 ? 'danger': ''">
						<text v-if="item.type == 1">收</text>
						<text v-if="item.type == 2">支</text>
					</view>
					<view class="detail">
						<view class="ordersn"> 订单：{{item.order}} </view>
						<view class="count">
							<view class="type" v-if="item.type == 1">充值</view>
							<view class="type" v-if="item.type == 2">消费</view>
							<view class="number float-right" :class="item.type == 2 ? 'ndanger': ''">
								<text v-if="item.type == 1">+</text>
								<text v-if="item.type == 2">-</text>
								{{item.amount}}
							</view>
						</view>
						<view class="time">{{item.create_time}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="c-empty">
      暂无记录!
    </view> -->
	</view>
</template>

<script setup>
import {onShow} from '@dcloudio/uni-app'
import { getCurrentInstance, reactive, toRefs } from "vue"
const {proxy} = getCurrentInstance()
const data = reactive({
	tabsTag: [
		{
			id: "0",
			name: "全部",
		},
		{
			id: "1",
			name: "充值",
		},
		{
			id: "2",
			name: "消费",
		},
	], // 状态栏
	current: 0,
	list: []
})
const { tabsTag, current, list } = toRefs(data)

const tabsChange = (index) => {
	data.current = index
	getData()
}

onShow(() => {
	// getData()
})

async function getData() {
	let res = await proxy.$post('RechargeList',{
		type: data.tabsTag[data.current].id
	})
	if(res.code == 200) {
		data.list = res.data
	}
}

</script>

<style lang="scss" scoped>
.order {
	min-height: 100vh;
	background: $bg_color;
	.nav-tab {
		width: 100%;
		position: fixed;
		z-index: 9;
		background: #ffffff;
		.tab-box {
			width: 100%;
			height: 80rpx;
			display: flex;
			.tab-item {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				position: relative;
				.tab-line {
					width: 60rpx;
					height: 8rpx;
					border-radius: 8rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -30rpx;
					background: $main_color;
				}
			}
			.act-item {
				color: $main_color;
			}
		}
	}
	.c-com {
		width: 100%;
		height: auto;
		padding: 100rpx 20rpx 20rpx;
	}

	.tab-content {
		min-height: 400rpx;
		overflow: auto;
		.points-order-item {
			position: relative;
			padding-left: 154rpx;
			margin: 0rpx 0rpx 24rpx 0rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			.flag {
				position: absolute;
				left: 32rpx;
				top: 50%;
				margin-top: -45rpx;
				display: inline-block;
				width: 90rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 90rpx;
				text-align: center;
				background: #c9ebdc;
				color: $main_color;
				font-size: 44rpx;
			}
			.danger{
				color: #f00;
				background: #ffebeb;
			}
			.detail {
				padding: 32rpx 32rpx 32rpx 0;
				.ordersn {
					font-size: 28rpx;
					color: #1f1f1f;
				}
				.count {
					padding: 10rpx 0;
					.float-right {
						float: right;
					}
				}
				.type {
					display: inline-block;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #1f1f1f;
				}
				.number {
					color: $main_color;
					font-size: 40rpx;
					line-height: 40rpx;
					font-weight: 500;
				}
				.time {
					font-size: 22rpx;
					color: #999999;
				}
				.ndanger{
					color: #f00;
				}
			}
		}
	}

	.c-empty {
		width: 100%;
		height: 60vh;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999;
	}
}
</style>
